import React from "react";
import { TMap } from '@map-component/react-tmap';
const RoomInfo = () => {
    const [searchParams] = React.Router.useSearchParams()
    const roomid = searchParams.get('roomid') ? searchParams.get('roomid') : 0
    const [info, setInfo] = React.useState<any>({})

    React.useEffect(() => {
        getRoomInfoData();
    }, [])

    const getRoomInfoData = async () => {
        let result = await React.HTTP.post('/room/info', {
            roomid: roomid
        });

        if (result.code == 1) {
            setInfo(result.data)
        }
    }

    const toConfirmOrder = () =>
    {
        if(Object.getOwnPropertyNames(React.Business).length <= 0)
        {
            React.error('未登陆，请先去登陆', () => React.navigate('/business/login'))
            return false;
        }

        React.navigate(`/room/confirm?roomid=${roomid}`)
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/detail.css" />

            <React.UI.Image src={info.thumb_text} height={213} fit='cover' />

            <div className="detail_top">
                <div id="intro" className="intro">
                    <div className="title">{info.name}</div>
                    <div className="betwee">
                        <div className="left">
                            {
                                info.flag_text && info.flag_text.map((flag: string, index: number) => {
                                    return (
                                        <span key={index}>{flag}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="title">{info.content}</div>
                </div>
                <div className="notesin">
                    <div className="title">预订须知</div>
                    <div className="item">
                        <span className="tips">预订房型：</span>
                        <span>{info.name}</span>
                    </div>
                    <div className="item">
                        <span className="tips">入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className="item">
                        <span className="tips">剩余户型数量：</span>
                        <span>{info.total}</span>
                    </div>
                </div>

                {/* 地图组件 */}
                <TMap
                    mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
                    center={{ lat: 39.984104, lng: 116.307503 }}
                    version='1.exp'
                />

                <div id="comment" className="comment">
                    <div className="title">评价</div>
                    <div className="rate-list-item">
                        <div className="item-content">
                            <div className="content-prefix">
                                <div className="ratelist">
                                    <div className="image">
                                        <img src="/assets/images/avatar.png" alt="" />
                                    </div>
                                    <p className="nickname">张三</p>
                                </div>
                            </div>
                            <div className="content-main">
                                <div className="rate">
                                    <img src="/assets/images/rate.png" alt="" />
                                    <img src="/assets/images/rate.png" alt="" />
                                    <img src="/assets/images/rate.png" alt="" />
                                    <img src="/assets/images/rate.png" alt="" />
                                    <img src="/assets/images/rate.png" alt="" />
                                </div>
                                <div className="item-description">
                                    <p>房间采光不错,卫生也搞的挺好的,房间旁边是个校园,足够安静,对于我这个对睡眠质量要求比较高的人来说,感觉能够了</p>
                                    <p className="item-time">2024-03-14 10:53:56</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="divider-horizontal">
                        <div className="divider-content">
                            <a href="hotel-rate.html">更多评价内容</a>
                        </div>
                    </div>
                </div>

            </div>

            <div className="foot-bar">
                <div className="price">
                    ￥{info.price}
                </div>
                <React.UI.Button color='primary' onClick={toConfirmOrder} shape='rounded'>
                    立即预定
                </React.UI.Button>
            </div>
        </>
    )
}

export default RoomInfo;